<template>
  <div>
    <div class="pageCard">
      <a-form layout="inline" :model="formSearch">
        <a-form-item>
          <a-input v-model:value="formSearch.name" placeholder="请输入单位名称">
          </a-input>
        </a-form-item>
        <a-form-item>
          <a-input
            v-model:value="formSearch.code"
            placeholder="请输入医疗机构编码"
          >
          </a-input>
        </a-form-item>
        <a-form-item>
          <a-button type="primary" @click="getSearch">查询</a-button>
        </a-form-item>
        <a-form-item>
          <a-button @click="toresetFields">重置</a-button>
        </a-form-item>
      </a-form>
    </div>
    <div style="background:#fff">
        <a-table
        style="padding:0 20px"
      :pagination="pagination"
      :columns="columns"
      :rowKey="(record) => record.id"
      :data-source="list"
    >
      <template #name="{ text }">
        <a>{{ text }}</a>
      </template>
      
       <template #creditStatus="{ record }">
          <a-tag color="orange" v-if="record.creditStatus == 'wait'">未认证</a-tag>
          <a-tag color="green" v-if="record.creditStatus == 'success'">认证成功</a-tag>
          <a-tag color="red" v-if="record.creditStatus == 'fail'">认证失败</a-tag>
       </template>
      <template #operation="{ record }">
        <div style="display: flex; align-items: center">
          <div
            style="cursor: pointer; padding: 0 4px"
            class="color_blue"
             v-if="record.creditStatus != 'success'"
            @click="handleCreditStatus('success',record)"
          >
            同意
          </div>
          <div
            style="cursor: pointer; padding: 0 4px"
            class="color_red"
             v-if="record.creditStatus != 'success'"
            @click="handleCreditStatus('fail',record)"
          >
            拒绝
          </div>
          
        </div>
      </template>
      <template #title>
        <div class="ANTTable_header">
          <div style="font-weight:bold">医院机构</div>
        </div>
      </template>
    </a-table>
    </div>
  
  </div>
</template>
<script>
import { createVNode,onMounted, reactive, ref, toRefs, watch } from "vue";
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
import { Form } from "ant-design-vue";
import { Modal,message } from 'ant-design-vue';
import * as hospitalApi from "@/api/hospital";
// 表格Column
const columns = [
  {
    title: "单位名称",
    dataIndex: "name",
  },
  {
    title: "医疗机构编码",
    dataIndex: "code",
  },
  {
    title: "企业信用代码",
    dataIndex: "creditCode",
  },
  {
    title: "地址",
    dataIndex: "address",
    ellipsis: true,
    ellipsis: 200,
  },
  {
    title: "管理员",
    dataIndex: "adminName",
  },
  {
    title: "认证状态",
    dataIndex: "creditStatus",
     slots: { customRender: "creditStatus" },
  },
  {
    title: "操作",
    dataIndex: "operation",
    slots: { customRender: "operation" },
  },
];
const useForm = Form.useForm;
export default {
  
  setup() {
    const formSearch = reactive({
      name: "",
      code: "",
    });

    const tableData = reactive({ list: [], total: 0 });
    const { resetFields } = useForm(formSearch);
    const pageSize = ref(10);
    const pageIndex = ref(1);
    const pagination = reactive({
      total: 0,
      pageSize: pageSize.value, // 默认每页显示数量
      showSizeChanger: true, // 显示可改变每页数量
      pageSizeOptions: ["10", "20", "30", "40"], // 每页数量选项
      showTotal: (total) => `总数 ${total}条数据`, // 显示总数
      onChange: (page, size) => {
        onPageChange(page, size);
      }, // 改变每页数量时更新显示
      onShowSizeChange: (current, size) => {
        onSizeChange(current, size);
      },
    });
    // 分页
    const onSizeChange = (current, size) => {
      pageIndex.value = 1;
      pagination.current = 1
      pageSize.value = size;
      handleGetDataList();
    };
    const onPageChange = (current, size) => {
      pageIndex.value = current;
       pagination.current = current
      handleGetDataList();
    };
    const getSearch = ()=>{
 pagination.current = 1
 handleGetDataList()
    }

    // 同意
    const handleCreditStatus = (type, item)=>{
      Modal.confirm({
        title:  `${type == "success" ? "是否同意认证" : "是否拒绝认证"}, 是否继续?`,
        icon: createVNode(ExclamationCircleOutlined),
        content: '',
        okText: '确定',
        cancelText: '取消',

        onOk() {
           hospitalApi
            .hospitalBaseSave({
              id: item.id,
              creditStatus: type,
              adminMobile:item.adminMobile
            })
            .then((res) => {
              if (res && res.success) {
               getSearch()
                 message.success(`${
                    type == "success" ? "同意认证成功" : "已拒绝认证"
                  }`)
              }
            });
        },
        onCancel() {
         message.info('已取消')
        },

      });
    }
    // 获取表格
    const handleGetDataList = () => {
      let params = {
        pageIndex: pageIndex.value,
        pageSize: pageSize.value,
        name: formSearch.name,
        code: formSearch.code,
      };
      hospitalApi.hospitalGetList(params).then((res) => {
        if (res && res.success) {
          tableData.list = res.data;
          pagination.total = res.total;
        }
      });
    };
    // 重置表格
    const toresetFields = () => {
      resetFields();
      getSearch();
    };
    // 监听表格
    watch(
      () => formSearch,
      (curAge, preAge) => {
        getSearch();
      },
      { deep: true }
    );

   
    onMounted(() => {
      handleGetDataList();
    });
    return {
      formSearch,
      toresetFields,

      columns,
      pagination,
      ...toRefs(tableData),
      handleGetDataList,
      getSearch,
      onPageChange,
      onSizeChange,

handleCreditStatus,
    };
  },
};
</script>